<meta charset="UTF-8">
<script type="text/javascript">
	function fileSelected() {
		//alert(document.getElementById('fileToUpload'));
		var file = document.getElementById('fileToUpload').files[0];
		var fileName = file.name;
		var file_typename = fileName.substring(fileName.lastIndexOf('.'),
				fileName.length);
		console.log(file_typename);
		if (file_typename == '.json') {
			$("#uploadFile").show();
			if (file) {
				$("#uploadFile").show();
				var fileSize = 0;
				if (file.size > 1024 * 1024)
					fileSize = (Math.round(file.size * 100 / (1024 * 1024)) / 100)
							.toString()
							+ 'MB';
				else
					fileSize = (Math.round(file.size * 100 / 1024) / 100)
							.toString()
							+ 'KB';

				document.getElementById('fileName').innerHTML = 'FileName:'
						+ file.name;
				document.getElementById('fileSize').innerHTML = 'Size:'
						+ fileSize;
				document.getElementById('fileType').innerHTML = 'type:'
						+ "json";
			}
		} else {
			$("#uploadFile").hide();
			document.getElementById('fileName').innerHTML = "<span style='color:Red'>error:You should choose a json file  not a  "
					+ file_typename + "  file,please choose again</span>"
			document.getElementById('fileSize').innerHTML = "";
			document.getElementById('fileType').innerHTML = "";
		}
	}

	function uploadFile() {
		var fd = new FormData();
		fd.append("fileToUpload",
				document.getElementById('fileToUpload').files[0]);
		var xhr = new XMLHttpRequest();
		xhr.upload.addEventListener("progress", uploadProgress, false);
		xhr.addEventListener("load", uploadComplete, false);
		xhr.addEventListener("error", uploadFailed, false);
		xhr.addEventListener("abort", uploadCanceled, false);
		xhr.open("POST", "servlet/kekeServlet");
		xhr.send(fd);
	}

	function uploadProgress(evt) {
		if (evt.lengthComputable) {
			var percentComplete = Math.round(evt.loaded * 100 / evt.total);
			$('#progressNumber').progressbar('setValue', percentComplete);
		} else {
			document.getElementById('progressNumber').innerHTML = 'can not calculate';
		}
	}

	function uploadComplete(evt) {
		$.messager.show(
				{
					title:'File Upload success.',
					msg:'File Upload success.',
					showType:'slide'
				});
	}

	function uploadFailed(evt) {
		$.messager.show(
				{
					title:'File Upload failed.',
					msg:'File Upload failed.',
					showType:'slide'
				});
	}

	function uploadCanceled(evt) {
		$.messager.show(
				{
					title:'File Upload cancle.',
					msg:'File Upload calcle.',
					showType:'slide'
				});
	}
</script>
<div align="center">
	<h2>Upload Data</h2>
	<h3>You must choose a data set to drive the BehaviorAnalysisSystem</h3>
	<div style="margin: 20px 0;"></div>
	<div class="easyui-panel" title="Upload File"
		style="width: 400px; padding: 30px 70px 50px 70px">
		<div style="margin-bottom: 20px">
			<div>Data Set:</div>
			<!-- <input class="easyui-filebox" name="fileToUpload" id="fileToUpload"
					multiple="multiple"
					data-options="onChange:function(){fileSelected();},prompt:'Choose another file...'"
					style="width: 100%"> -->
			<input type="file" id="fileToUpload" value="Choose File"
				multiple="multiple" onchange=fileSelected(); style="width: 100%">
		</div>
		<div id="fileName" style="padding: 10px"></div>
		<div id="fileSize" style="padding: 10px"></div>
		<div id="fileType" style="padding: 10px"></div>

		<div id="progressNumber" class="easyui-progressbar"
			style="width: 100%;"></div>
		<div>
			<a href="#" class="easyui-linkbutton" style="width: 65%;display:none" id="uploadFile"
				onclick="uploadFile()">Upload</a>
		</div>
	</div>
</div>